<template>
	<view class="apply">
		<uni-nav-bar height="65px" color="#fff" left-icon="left" @clickLeft='handleBack' backgroundColor="#00aaff" title="车辆编制详情" />
		<common-info></common-info>
		<view class="car-type">
			<view class="car-type-tit">
				<view class="car-type-tit-a">车辆种类</view>
				<view class="car-type-tit-b">现有车辆</view>
				<view class="car-type-tit-c">编制车辆</view>
			</view>
			<view class="car-type-list" v-for="(item,index) in typeObj" :key="index">
				<view class="car-type-list-title">{{item.name}}</view>
				<view class="car-type-list-num1">{{item.curValue}}</view>
				<view class="car-type-list-num2">{{item.estValue}}</view>
				
			</view>
			<view class="car-type-tit" style="border-bottom: 1px solid #EFF2F4;padding-bottom: 10px;">
				<view class="car-type-tit-a" style="color: #797E84;">合计</view>
				<view class="car-type-tit-b">44</view>
				<view class="car-type-tit-c">17</view>
			</view>
		</view>
		<view style="height: 15px;background-color: #EFF2F4;"></view>
		
	</view>
</template>

<script setup name="Apply">
	import CommonInfo from '../../manager/component/commonInfo.vue'
	
	const typeObj = [
		{
			name:'实物保障用车',
			curValue:'10',
			estValue:'3',
			applyValue:'3'
		},
		{
			name:'机要通信用车',
			curValue:'5',
			estValue:'5',
			applyValue:'3'
		},
		{
			name:'应急用车',
			curValue:'2',
			estValue:'2',
			applyValue:'3'
		},
		{
			name:'特种专业技术用车',
			curValue:'2',
			estValue:'2',
			applyValue:'3'
		},
		{
			name:'综合执法用车',
			curValue:'2',
			estValue:'2',
			applyValue:'3'
		},
		{
			name:'离退休干部用车',
			curValue:'1',
			estValue:'1',
			applyValue:'3'
		},
		{
			name:'调研用车',
			curValue:'2',
			estValue:'2',
			applyValue:'3'
		},
		{
			name:'业务用车',
			curValue:'10',
			estValue:'0',
			applyValue:'3'
		},
		{
			name:'执勤执法用车',
			curValue:'5',
			estValue:'0',
			applyValue:'3'
		},
		{
			name:'特种专业用车',
			curValue:'5',
			estValue:'0',
			applyValue:'3'
		}
	]
	
	
	
	function handleBack() {
		uni.navigateBack();
	}
	function submit(){
		
	}
</script>
<style lang="scss" scoped>
	.apply{
		background-color: #fff;
		.car-type{
			padding: 0 15px;
			&-tit{
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 10px;
				gap: 20px;
				&-a{
					// flex: 1;
					width: 65px;
					margin-right: auto;
				}
				&-b{
					// flex: 1;
					width: 36px;
				}
				&-c{
					// flex: 2;
					
					width: 36px;
				}
			}
			&-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				padding-bottom: 10px;
				gap: 20px;
				border-bottom: 1px solid #EFF2F4;
				&-title{
					width: 65px;
					color: #797E84;
					margin-right: auto;
				}
				&-num1{
					width: 36px;
				}
				&-num2{
					width: 36px;
					
				}
			}
		}
		.form{
			padding: 0 15px;
			.form-list{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: right;
				padding: 10px 0;
				border-bottom: 1px solid #EFF2F4;
				:deep(.uni-input-placeholder, .input-placeholder,.u-input__content__field-wrapper){
					text-align: right !important;
				}
			}
		}
		.btn{
			height: 40px;
			width: 94%;
			line-height: 40px;
			text-align: center;
			background-color: #3C88D8;
			border-radius: 4px;
			color: #fff;
			margin-left: 3%;
			position: fixed;
			bottom: 10px;
		}
	}
</style>